import { Avatar, Dropdown, Menu, message } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import { useUser } from '../context/UserContext.jsx';
import { useNavigate } from 'react-router-dom';

export default function UserMenu({ onLogout }) {
  const { user } = useUser();
  const navigate = useNavigate();

  const handleMenuClick = ({ key }) => {
    if (key === 'profile') {
      if (user && user.username) {
        navigate('/profile');
      } else {
        message.warning('请先登录');
        navigate('/login');
      }
    } else if (key === 'logout') {
      if (onLogout) onLogout();
    }
  };

  const menuItems = [
    { key: 'profile', icon: <UserOutlined />, label: '个人中心' },
    { key: 'logout', icon: <LogoutOutlined />, label: '退出登录' },
  ];

  return (
    <div style={{ position: 'absolute', top: 24, right: 32, zIndex: 100 }}>
      <Dropdown menu={{ items: menuItems, onClick: handleMenuClick }} placement="bottomRight">
        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', gap: 8 }}>
          <Avatar src={user?.avatar} icon={<UserOutlined />} />
          <span style={{ fontWeight: 500 }}>{user?.username || '未登录'}</span>
        </div>
      </Dropdown>
    </div>
  );
} 